Angular অ্যাপ্লিকেশন গুলোর মধ্যে রাউটিং এবং নেভিগেশন অত্যন্ত গুরুত্বপূর্ণ অংশ। রাউটিং হলো একটি অ্যাপ্লিকেশন ব্যবহারকারীর জন্য ভিন্ন ভিন্ন পেজ বা ভিউতে নেভিগেট করার পদ্ধতি। Angular-এ Router ব্যবহার করে এক পেজ থেকে অন্য পেজে যাওয়া এবং ব্যবহারকারীর চাহিদা অনুযায়ী UI পরিবর্তন করা হয়। এটি Single Page Application (SPA) তৈরি করতে সাহায্য করে, যেখানে পুরো পেজ রিফ্রেশ না হয়ে কেবলমাত্র প্রয়োজনীয় অংশ পরিবর্তিত হয়।

রাউটিং কী?

রাউটিং হলো একটি সিস্টেম যা ব্যবহারকারীকে বিভিন্ন URL বা পেজের মধ্যে নেভিগেট করতে সাহায্য করে। Angular অ্যাপ্লিকেশনে রাউটিং ব্যবহার করে URL অনুযায়ী নির্দিষ্ট কম্পোনেন্ট লোড করা হয়। রাউটার অ্যাপ্লিকেশনটি "একক পেজ অ্যাপ্লিকেশন" হিসেবে কাজ করতে সক্ষম করে, যেখানে পেজ লোড করার সময় সম্পূর্ণ নতুন পেজ লোড না হয়ে শুধুমাত্র সংশ্লিষ্ট অংশ রেন্ডার করা হয়।

Angular রাউটিং কনফিগারেশন

Angular-এ রাউটিং কনফিগার করতে হয় RouterModule ব্যবহার করে। AppRoutingModule একটি মডিউল হিসেবে রাউটিং কনফিগার করে এবং এই মডিউলটিকে মূল অ্যাপ মডিউলে (AppModule) অন্তর্ভুক্ত করা হয়।

রাউটিং কনফিগারেশন

রাউটিং কনফিগার করার জন্য প্রথমে অ্যাপ্লিকেশনকে একটি রাউটিং মডিউল তৈরি করতে হয়। CLI ব্যবহার করে এই মডিউলটি তৈরি করা যেতে পারে:

ng generate module app-routing --flat --module=app

এখানে, app-routing.module.ts ফাইলে রাউটিং কনফিগারেশন লিখতে হবে। উদাহরণস্বরূপ:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• path: '' ডিফল্ট রুট হিসেবে ব্যবহৃত হয়, যেটি সাধারণত হোম পেজ বা মূল পেজ হিসেবে কাজ করে।
• path: 'about' হলো /about URL এর জন্য রাউট, যা AboutComponent কে লোড করবে।
• path: '**' ব্যবহার করা হয় কোন অজানা রুটের জন্য, যা সাধারণত 404 পেজ বা Not Found পেজের জন্য ব্যবহৃত হয়।

রাউটিং সক্রিয় করা

AppRoutingModule মডিউলটি অ্যাপের মূল মডিউল AppModule-এ অন্তর্ভুক্ত করতে হয়:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, AppRoutingModule কে imports অ্যারে তে যুক্ত করা হয়েছে, যা অ্যাপ্লিকেশনটি রাউটিং ব্যবস্থাপনার জন্য প্রস্তুত করে।

রাউটিং নেভিগেশন

রাউটিং কনফিগার করার পর, বিভিন্ন কম্পোনেন্ট বা HTML টেমপলেটে ব্যবহারকারীকে রাউট করতে হবে। Angular বিভিন্নভাবে রাউটিং এবং নেভিগেশন সাপোর্ট করে।

1. RouterLink

Angular-এ RouterLink ডিরেক্টিভ ব্যবহার করে কোনো নির্দিষ্ট রুটে নেভিগেট করা হয়। এটি একটি উপযুক্ত URL তৈরি করে যেটি ব্যবহারকারী ক্লিক করলে নির্দিষ্ট রুটে নিয়ে যাবে।

উদাহরণ:

<a routerLink="/about">About</a>

এখানে, routerLink="/about" ব্যবহারকারীর ক্লিক করার মাধ্যমে /about রুটে নেভিগেট করবে।

2. Router.navigate()

কম্পোনেন্টের ভিতরেও রাউটিং করা যায়, যেখানে Angular এর Router ক্লাস ব্যবহার করে প্রোগ্রাম্যাটিক্যালি নেভিগেট করা হয়। উদাহরণ:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `<button (click)="goToAbout()">Go to About</button>`
})
export class AppComponent {

  constructor(private router: Router) {}

  goToAbout() {
    this.router.navigate(['/about']);
  }
}

এখানে, this.router.navigate(['/about']) ব্যবহৃত হয়েছে, যাতে ব্যবহারকারী ক্লিক করলে /about রুটে নেভিগেট করা হয়।

রাউটার আউটলেট (Router Outlet)

রাউটিং ব্যবস্থাপনা করার জন্য আপনাকে অ্যাপ্লিকেশনের টেমপলেটে <router-outlet> ট্যাগ ব্যবহার করতে হবে, যেখানে নির্দিষ্ট রুটের কম্পোনেন্ট রেন্ডার হবে।

<router-outlet></router-outlet>

এটি একটি বিশেষ ট্যাগ যা Angular রাউটার দ্বারা রেন্ডারিং কম্পোনেন্টের জন্য ব্যবহৃত হয়।

রাউটিং প্রটেকশন

Angular রাউটিং সিস্টেম ব্যবহার করে নির্দিষ্ট রুটে নেভিগেশন প্রোটেক্ট করা যায়। উদাহরণস্বরূপ, লগইন বা অথরাইজেশন চেক করার জন্য গার্ড ব্যবহার করা যেতে পারে। গার্ডস মূলত রাউটিংয়ের আগে কিছু শর্ত চেক করে।

রাউট গার্ড উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const isAuthenticated = false; // এখানে প্রপার লগিন চেক করতে হবে
    if (!isAuthenticated) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

এখানে AuthGuard ক্লাসটি /login রুটে নেভিগেট করবে যদি ব্যবহারকারী অথরাইজড না থাকে।

সারাংশ

Angular রাউটিং একটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীর অ্যাপ্লিকেশনের বিভিন্ন অংশে সহজেই নেভিগেট করতে সাহায্য করে। এটি একাধিক ভিউ বা পেজের মধ্যে সহজে টগল করার জন্য ব্যবহৃত হয় এবং সিঙ্গেল পেজ অ্যাপ্লিকেশন তৈরি করতে সহায়ক। RouterLink, Router.navigate(), এবং Router Outlet এর মাধ্যমে Angular অ্যাপ্লিকেশনে নেভিগেশন কার্যকর করা হয়।